<template>
    <div class="tmpl">
        <nav-bar title="新闻详情"></nav-bar>
        <div class="news-title">
            <p v-text="newsDetail.title"></p>
            <div>
                <span>{{newsDetail.click}}次点击</span>
                <span>分类:{{newsDetail.category}}</span>
                <span>添加时间:{{newsDetail.add_time | convertDate}}</span>
            </div>
        </div>
        <div class="news-content" v-html="newsDetail.content"></div>

        <!--评论内容开始-->
        <!--使用子组件-->
        <comment :tid="nid"></comment>
        <!--评论内容结束-->
    </div>
</template>


<script>
    export default {
        name: "newDetail",
        data() {
            return {
                // newsDetail:{}, //就是为了象征性的表示其数据类型
                newsDetail: {},
                nid: this.$route.query.id
            }
        },
        created() {
            //1:获取路由参数
            // let id = this.$route.query.id;
            //2:拼接路由参数成为后台请求的URL
            this.$ajax.get('news/getNews/' + this.nid)
                .then(res => {
                    //3:响应回来渲染页面
                    this.newsDetail = res.data.message;
                    //数组，就一个数据，所以直接取[0]
                })
                .catch(err => {
                    console.log(err);
                })
        },

        //路由钩子

        // beforeRouteEnter(to, from, next) {
        //     let myTitle = '';
        //
        //     if(from.name === 'name.list'){
        //         //新闻
        //         myTitle = '新闻详情';
        //     }else if(from.name === 'goods.detail'){
        //         //商品详情过来
        //         myTitle = '图文介绍';
        //     }
        //
        //     //一定调用next,不然就没有任何效果
        //     next(vm =>{
        //         //通过 VM 访问组件实例
        //         vm.title = myTitle;
        //     });
        // }

    }

</script>
<style scoped>
    .news-title p {
        color: #0a87f8;
        font-size: 20px;
        font-weight: bold;
    }

    .news-title span {
        margin-right: 30px;
    }

    .news-title {
        margin-top: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
</style>